.vue {
    width: 100%;
    height: 80px;
    z-index: 999;
    position: fixed;
    min-width: 1300px;
    line-height: 80px;
    background-size: cover;
    animation: imgAnimation 5s infinite steps(100);

    @keyframes imgAnimation {
        0% {
            background-image: url(@/assets/img/headerfooter/top1.png);
        }

        50% {
            background-image: url(@/assets/img/headerfooter/top2.png);
        }

        100% {
            background-image: url(@/assets/img/headerfooter/top1.png);
        }
    }

    .margins {
        margin: 0 auto;
        padding: 0px 80px 0 80px;

        .header {
            float: left;

            .logo {
                .text {
                    color: white;
                    font-size: 26px;
                    text-shadow: 0.5px 1px 0px #999, 1px 2px 0px #888;
                }
            }

        }

        .menu {
            float: right;

            .item {
                width: 150px;
                color: white;
                font-size: 16px;
                cursor: pointer;
                font-weight: bold;
                text-align: center;
                display: inline-block;
                transition: .3s;
            }

            .item:hover {
                background-color: rgba(255, 255, 255, 0.2);
                transition: .3s;

            }
        }
    }
}

a {
    color: white !important;
}

.active {
    font-weight: bold;
    color: rgb(101, 186, 255) !important;
    background-color: rgba(255, 255, 255, 0.3);
}

.exact-active {
    font-weight: bold;
    color: rgb(101, 186, 255) !important;
    background-color: rgba(255, 255, 255, 0.3);
}